<template>
  <el-main style="background-color:#fff">
    <el-table
      :data="table.data"
      style="width: 100%"
    >
      <el-table-column
        prop="index"
        label="序号"
        width="100"
      >
        <template #default="scope">
          {{ (scope.$index + 1) + ((table.query.page - 1) * table.query.limit) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="采集器名称"
      />
      <el-table-column
        prop="status"
        label="采集器状态"
      >
        <template #default="scope">
          {{ scope.row.status === 0 ? '空闲' : scope.row.status === 1 ? '访问' : 离线 }}
        </template>
      </el-table-column>
      <el-table-column
        prop="proxyServer"
        label="代理服务器"
      />
      <el-table-column
        prop="device"
        label="访问设备"
      />
      <el-table-column
        prop="osName"
        label="访问操作系统"
      />
      <el-table-column
        prop="osVersion"
        label="操作系统版本"
      />
      <el-table-column
        prop="browserName"
        label="访问浏览器"
      />
      <el-table-column
        prop="browserVersion"
        label="浏览器版本"
      />
      <el-table-column
        fixed="right"
        label="操作"
        width="120"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            @click="onClickModify(scope.row)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <br>

    <el-pagination
      background
      layout="total, sizes, prev, pager, next"
      :total="table.total"
      :page-size="table.query.limit"
      @current-change="handleChangePage"
      @size-change="handleChangeLimit"
    />
  </el-main>

  <el-dialog
    v-model="form.visible"
    :title="form.name"
    :close-on-click-modal="false"
    destroy-on-close
    close-on-press-escape
    width="400"
    center
  >
    <el-form
      ref="ruleFormRef"
      label-position="left"
      :model="form"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item
        label="采集器名称"
      >
        <el-input
          v-model="form.name"
          style="width: 190px;"
          :disabled="true"
        />
      </el-form-item>
      <el-form-item
        prop="proxyServer"
        label="代理服务器"
      >
        <el-input
          v-model="form.proxyServer"
          style="width: 190px;"
        />
      </el-form-item>
      <el-form-item
        label="访问设备"
        prop="device"
      >
        <el-select
          v-model="form.device"
          placeholder="请选择设备"
          @change="handleChangeDevice"
        >
          <el-option
            label="PC"
            value="pc"
          />
          <el-option
            label="平板"
            value="pad"
          />
          <el-option
            label="手机"
            value="mobile"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        label="访问操作系统"
        prop="osName"
      >
        <el-select
          v-model="form.osName"
          placeholder="请选择操作系统"
          @change="handleChangeOs"
        >
          <template v-for="item in props.osList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="操作系统版本"
        prop="osVersion"
      >
        <el-select
          v-model="form.osVersion"
          placeholder="请选择操作系统版本"
        >
          <template v-for="item in props.osVersionList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="访问浏览器"
        prop="browserName"
      >
        <el-select
          v-model="form.browserName"
          placeholder="请选择浏览器"
          style="height: 100%;"
          @change="handleChangeBrowser"
        >
          <template v-for="item in props.browserList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
      <el-form-item
        label="浏览器版本"
        prop="browserVersion"
      >
        <el-select
          v-model="form.browserVersion"
          placeholder="请选择浏览器版本"
          style="height: 100%;"
        >
          <template v-for="item in props.browserVersionList">
            <el-option
              v-if="item.value"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </template>
        </el-select>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="onSubmit"
        >确定</el-button>
        <el-button @click="form.visible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  chromeBrowserVersion, edgeBrowserVersion, firefoxBrowserVersion, ieBrowserVersion, mobileBrowser,
  mobileOs, operaBrowserVersion,
  padBrowser,
  padOs,
  pcBrowser,
  pcOs, pcOsVersion
} from '@/views/manager/components/constant.js'
import { getStatus, setParam } from '@/apis/netflow.js'

const ruleFormRef = ref(null) // 登录表单ref

const form = reactive({
  visible: false,
  id: 0,
  name: '',
  proxyServer: '',
  device: '',
  osName: '',
  osVersion: '',
  browserName: '',
  browserVersion: ''
})

const props = reactive({
  osList: pcOs,
  osVersionList: pcOsVersion,
  browserList: pcBrowser,
  browserVersionList: chromeBrowserVersion
})

const rules = reactive({
  proxyServer: [
    { message: '请输入动态代理址', trigger: 'change' }
  ],
  device: [
    { required: true, message: '请选择设备类型', trigger: 'change' }
  ],
  osName: [
    { required: true, message: '请选择操作系统', trigger: 'change' }
  ],
  osVersion: [
    { required: true, message: '请选择操作系统版本', trigger: 'change' }
  ],
  browserName: [
    { required: true, message: '请选择浏览器类型', trigger: 'change' }
  ],
  browserVersion: [
    { required: true, message: '请选择浏览器版本号', trigger: 'change' }
  ]
})

const onSubmit = () => {
  ruleFormRef.value.validate((validate) => {
    if (validate) { // 判断表单是否验证通过。
      const params = {
        name: form.name,
        proxyServer: form.proxyServer,
        device: form.device,
        osName: form.osName,
        osVersion: form.osVersion,
        browserName: form.browserName,
        browserVersion: form.browserVersion
      }

      setParam(params).then((result) => {
        if (result === 0) {
          form.visible = false
          ElMessage.success('修改成功！')
          init()
        } else {
          form.visible = false
          ElMessage.error('修改失败！')
        }
      })
    } else {
      ElMessage.error('请检查数据！')
    }
  })
}

const table = ref({
  total: 0,
  query: {
    limit: 20,
    page: 1,
    order: null,
    name: null
  },
  data: [
    {
      id: '1',
      name: '采集器<127.0.0.1>',
      state: '空闲'
    }
  ]
})

const init = () => {
  table.value.data = []
  const params = { limit: table.value.query.limit, page: table.value.query.page }
  getStatus(params).then((result) => {
    // 0 空闲 1 访问 2 离线
    table.value.data = result.list
    table.value.total = result.total
  }).catch(() => {

  })
}

init()

const handleChangeDevice = (value) => {
  switch (value) {
    case 'pc':
      form.osName = pcOs[0].value
      form.browserName = pcBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      props.osList = pcOs
      props.browserList = pcBrowser
      props.browserVersionList = chromeBrowserVersion
      break
    case 'pad':
      form.osName = padOs[0].value
      form.browserName = padBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      props.osList = padOs
      props.browserList = padBrowser
      props.browserVersionList = chromeBrowserVersion
      break
    case 'mobile':
      form.osName = padOs[0].value
      form.browserName = padBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      props.osList = mobileOs
      props.browserList = mobileBrowser
      props.browserVersionList = chromeBrowserVersion
      break
  }
}

const handleChangeOs = (value) => {
  switch (value) {
    case 'windows':
      props.browserList = padBrowser
      form.browserName = padBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      break
    case 'android':
      props.browserList = mobileBrowser
      form.browserName = mobileBrowser[0].value
      form.browserVersion = chromeBrowserVersion[0].value
      break
  }
}

const handleChangeBrowser = (value) => {
  form.browserVersion = ''
  switch (value) {
    case 'chrome':
      props.browserVersionList = chromeBrowserVersion
      form.browserVersion = chromeBrowserVersion[0].value
      break
    case 'ie':
      props.browserVersionList = ieBrowserVersion
      form.browserVersion = ieBrowserVersion[0].value
      break
    case 'edge':
      props.browserVersionList = edgeBrowserVersion
      form.browserVersion = edgeBrowserVersion[0].value
      break
    case 'firefox':
      props.browserVersionList = firefoxBrowserVersion
      form.browserVersion = firefoxBrowserVersion[0].value
      break
    case 'opera':
      props.browserVersionList = operaBrowserVersion
      form.browserVersion = operaBrowserVersion[0].value
      break
  }
}

const onClickModify = (row) => {
  form.visible = true
  form.id = row.id
  form.name = row.name
  form.proxyServer = row.proxyServer
  form.device = row.device
  form.osName = row.osName
  form.osVersion = row.osVersion
  form.browserName = row.browserName
  form.browserVersion = row.browserVersion
}

const handleChangePage = (value) => {
  table.value.query.page = value
  init()
}
const handleChangeLimit = (value) => {
  table.value.query.limit = value
  init()
}

</script>
